$(function () {
  function setArList() {
    let id = location.href.split('=')[1]
    axios({
      url: '/my/article/' + id
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layui.form.val('formEdit', res.data)
      setTimeout(() => {
        tinymce.activeEditor.selection.setContent(res.data.content)
      }, 300)
      $image.cropper('destroy')  // 销毁旧的裁剪区域
        .attr('src', 'http://api-breakingnews-web.itheima.net' + res.data.cover_img)  // 重新设置图片路径
        .cropper(options)
    }).catch(() => {
      layui.layer.msg('页面出错。请联系管理员')
    })
  }
  /**
   * 第二行
   */
  // 未封装
  // initArtiPubList()

  // 已封装
  getArtiPubList(initArtiPubList1)
  function initArtiPubList1(res) {
    let arr = ['<option value="">请选择文章所属分类</option>']
    res.data.forEach(ele => {
      if (ele.Id < 0) return
      arr.push(`
           <option value="${ele.Id}">${ele.name}</option>
        `)
    })
    $('[name=cate_id]').empty().html(arr.join(''))
    layui.form.render()
    setArList()
  }

  /**
   * 第三行
   */
  initEditor()

  /**
  * 第三行
  */
  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  /**
   * 文章状态处理
   */
  let state;
  $('#btn1').on('click', function () {
    state = '已发布'
  })
  $('#btn2').on('click', function () {
    state = '草稿'
  })

  /**
   * 更换图片裁剪区域
   */
  $('#btnArtiImg').on('click', function () {
    $('#inpArtiImg').click()
  })
  $('#inpArtiImg').on('change', function () {
    let file = this.files[0]
    let newImgURL = URL.createObjectURL(file)
    $image.cropper('destroy')  // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)
  })

  /**
   * 文章发布事件绑定
   */
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fm = new FormData(this)
    fm.append('state', state)
    // 转换为二进制传输数据
    $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
      .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fm.append('cover_img', blob)
        axios({
          url: '/my/article/edit',
          method: 'POST',
          data: fm,
        }).then(({ data: res }) => {
          //成功回调
          if (res.status != 0) {
            return layui.layer.msg(res.message)
          }
          layui.layer.msg('恭喜您，修改文章成功！')
          setTimeout(() => {
            window.parent.document.querySelector('#arti_list').click()
          }, 1000)
        }).catch(() => {
          layui.layer.msg('页面出错，请联系管理员')
        })
      })
  })




})

/**
 * 普通请求（下面已利用封装）
 */
// function initArtiPubList() {
//   axios({
//     url: '/my/article/cates',
//   }).then(({ data: res }) => {
//     //成功回调
//     if (res.status != 0) {
//       return layui.layer.msg(res.message)
//     }
//     let arr = ['<option value="">请选择文章所属分类</option>']
//     res.data.forEach(ele => {
//       if (ele.Id < 0) return
//       arr.push(`
//          <option value="${ele.Id}">${ele.name}</option>
//       `)
//     })
//     $('[name=cate_id]').empty().html(arr.join(''))
//     layui.form.render()
//   }).catch(() => {
//     layui.layer.msg('页面出错，请联系管理员')
//   })
// }